<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <h3 class="form-setting-panel-title">{{field.displayName}}</h3>   
    <!-- end 标题 -->
    <p class="form-design-warning" style="margin-bottom: 5px">{{$t('common.form.tip.systemTemplateTips')}}</p>
    <h3>{{$t('common.base.concatOption')}}</h3>
    <div class="form-setting-group">
      <el-checkbox :value="field.setting.customerOption.linkman" @input="updateOptions($event, 'linkman')">{{$t('common.form.preview.customer.linkmanLabel')}}</el-checkbox>
      <el-checkbox :value="field.setting.customerOption.linkmanNotNull" @input="updateOptions($event, 'linkmanNotNull')" :disabled="!field.setting.customerOption.linkman">{{$t('common.form.preview.customer.linkmanIsRequire')}}</el-checkbox>
    </div>
    <div class="form-setting-group">
      <el-checkbox :value="field.setting.customerOption.address" @input="updateOptions($event, 'address')">{{mode == "product" ? $t('common.form.preview.customer.customerAddressLabel') : $t('common.form.preview.customer.addressLabel')}}</el-checkbox>
      <el-checkbox :value="field.setting.customerOption.addressNotNull" @input="updateOptions($event, 'addressNotNull')" :disabled="!field.setting.customerOption.address">{{mode == "product" ? $t('common.form.preview.customer.customerAddressIsRequire') : $t('common.form.preview.customer.addressIsRequire')}}</el-checkbox>
    </div>
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting';

export default {
  name: 'product-customer-extend-setting',
  mixins: [SettingMixin],
  props: {
    field: {
      type: Object,
      default: () => ({})
    },
    setting: {
      type: Object,
      default: () => ({})
    },
    mode: {
      type: String,
      deafault: '',
    },
  },
  computed: {
    isSystem() {
      return this.field.isSystem === 1;
    }
  },
  methods: {
    updateForDom(event){
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;
      
      this.update(value, prop)
    },
    updateOptions(value, prop, isSetting = false){
      this.$emit('updateOptions', {value, prop, isSetting})
    }
  }
}
</script>

<style lang="scss" scoped>
.form-setting-group{
  margin-bottom: 0;
}
</style>
